<template>
  <Page description="" title="岗位管理">
    <template #extra>
      <ElButton size="small" type="primary" @click="newForm" :icon="Plus">添加岗位</ElButton>
      <ElButton size="small" type="danger" :icon="Delete">删除</ElButton>
      <ElButton size="small" type="primary" :icon="Refresh">刷新</ElButton>
      <ElButton :icon="Download" size="small" type="success">导出</ElButton>
    </template>

    <div class="maque-page-content">
      <ElForm label-suffix=":" class="maque-search-form">
        <ElRow :gutter="20">
          <ElCol :span="6">
            <ElFormItem label="岗位名称">
              <ElInput placeholder="请输入角色名称"/>
            </ElFormItem>
          </ElCol>
          <ElCol :span="6">
            <ElFormItem label="岗位编号">
              <ElInput placeholder="请输入岗位编号"/>
            </ElFormItem>
          </ElCol>
          <ElCol :span="6">
            <ElFormItem class="form-button" label="">
              <ElButton size="small" type="primary">查询</ElButton>
              <ElButton size="small">重置</ElButton>
            </ElFormItem>
          </ElCol>
        </ElRow>
      </ElForm>
      <ElTable
        :data="tableData"
        border
        row-key="id"
        style="width: 100%; margin-bottom: 20px"
      >
        <ElTableColumn label="序号" type="index" width="90" align="center"/>
        <ElTableColumn label="岗位名称" prop="date"/>
        <ElTableColumn label="排序" prop="name"/>
        <ElTableColumn label="状态" prop="address"/>
        <ElTableColumn label="创建时间" prop="address"/>
        <ElTableColumn label="操作" width="180" align="center">
          <template #default="scope">
            <ElButton :icon="Edit" size="small" type="primary" @click="editForm(scope.row.id)">编辑</ElButton>
            <ElButton :icon="Delete" size="small" type="danger">删除</ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
      <ElPagination
        background
        layout="prev, pager, next,total,jumper"
        :total="1000"
      />
    </div>

    <PostEdit ref="refEdit"/>
  </Page>

</template>


<script setup lang="ts">
import {nextTick, ref} from 'vue';

import {Page} from '@vben/common-ui';

import {Delete, Download, Edit, Plus, Refresh} from '@element-plus/icons-vue';
import {
  ElButton,
  ElCol,
  ElForm,
  ElFormItem,
  ElInput,
  ElPagination,
  ElRow,
  ElTable,
  ElTableColumn,
} from 'element-plus';

import PostEdit from './components/post-edit.vue';

const tableData = [
  {
    id: 1,
    date: '2016-05-02',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-04',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-01',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 4,
    date: '2016-05-03',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
];


const refEdit = ref();
const newForm = () => {
  nextTick(() => {
    refEdit.value.init();
  })
}

const editForm = (id: string) => {
  nextTick(() => {
    refEdit.value.initEdit(id);
  })
}
</script>


<style scoped></style>
